<template>
    <div class="course-panel" :style="{ height: `${viewheight.GetViewHeight(105)}px` }">
        <el-scrollbar>
            <CourseInfo @stopload="stopload"/>
            <CourseSource :loading="loading"/>
        </el-scrollbar>
    </div>
</template>

<script setup lang="ts">
import { useViewHeightStore } from "@/store/viewheight";
import CourseSource from "./course-source.vue";
import CourseInfo from "./course-info.vue";
import { ref } from "vue";

const viewheight = useViewHeightStore();
const loading = ref<boolean>(true);

const stopload = (newValue:boolean) =>{
    loading.value = newValue;
}
</script>

<style scoped lang="less">
.course-panel {
    width: 900px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
</style>
